<template >
  <div class="container">
    <!-- 顶部 -->
    <div class="header">
      <van-icon name="arrow-left" @click="goback" class="header-left"  size="24" />
      填写服务订单
    </div>
    <!-- 流程进度栏 -->
    <status-bar item="0"/>
    <!-- <van-form @submit="onSubmit"> -->
      <!-- 表单标题 -->
      <van-cell class="cell">
        <template #title>
          <van-image
            width="25"
            height="25"
            :src="orderDetailData.service.serviceImg"
          />
          &nbsp;&nbsp;&nbsp;
          <span class="service-name">{{ orderDetailData.service.serviceName }}</span>
        </template>
        <template #default>
          <div class="service-text">
            <span>服务内容</span>
          </div>
        </template>
      </van-cell>
      <!-- 表单内容 -->
      <van-cell-group class="cell">
        <!-- 就诊医院 -->
        <van-cell>
          <template #title>就诊医院</template>
          <template #default>
            <div @click="showHospital=true">
              {{ form.hospital_name||"请选择医院" }}
              <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
        <!-- 就诊时间 -->
        <van-cell>
          <template #title>就诊时间</template>
          <template #default>
            <div @click="showTime=true">
              {{ currentDate.join('-')||"请选择时间" }}
              <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
        <!-- 陪诊师选择 -->
        <van-cell>
          <template #title>陪诊师</template>
            <template #default>
              <div @click="showCompanion=true">
                {{ currentCompanion||"请选择陪护师" }}
                <van-icon name="arrow" />
              </div>
            </template>
        </van-cell>
        <!-- 表单剩余 -->
        <van-cell>
         <template #title>接送地址</template>
         <template #default>
            <van-field class="text" style="height: 30px;" input-align="right" v-model="form.receiveAddress" placeholder="请填写就诊人地址" />
         </template>
        </van-cell>
        <van-cell>
          <template #title>联系电话</template>
          <template #default>
             <van-field class="text"  style="height: 30px;" input-align="right" v-model="form.tel" placeholder="请填写就诊人电话" />
          </template>
         </van-cell>
      </van-cell-group>
      <div style="margin: 10px 0 10px 12px;font-size: 14px;color: #999999;">服务需求</div>
      <van-cell-group class="cell">
        <van-field class="text" style="height: 100px;" v-model="form.demand" placeholder="请简单描述您要就诊的科室" />
      </van-cell-group>
      <van-button class="sumbit" type="primary" style="width: 100%;" @click="submitForm">提交订单</van-button>
    <!-- </van-form> -->
  </div>

  <!-- 医院弹窗 -->
  <van-popup
    v-model:show="showHospital"
    position="bottom"
    :style="{ height: '30%' }">
    <van-picker
      :columns="hospitalColumns"
      @cancel="showHospital = false"
      @confirm="onConfirmHospital"
    />
  </van-popup>
  <!-- 时间弹窗 -->
  <van-popup v-model:show="showTime" :style="{ padding: '64px' }" position="bottom">
    <van-date-picker
      v-model="currentDate"
      :min-date="minDate"
      @cancel="showTime=false"
      @confirm="onConfirmTime"
    />
  </van-popup>
  <!-- 陪护师弹窗 -->
   <van-popup
    v-model:show="showCompanion"
    position="bottom"
    :style="{ height: '30%' }">
    <van-picker
      :columns="CompanionColumns"
      @cancel="showCompanion = false"
      @confirm="onConfirmCompanion"
    />
  </van-popup>
  <!--支付二维码弹窗  -->
  <van-dialog 
    v-model:show="showCodeDialog" 
    :show-confirm-button="false" 
    :show-cancel-button="false"
    width="250px"
    style="text-align: center;">
    <template #title>
        <van-icon name="cross" style="float: left;margin-left: 10px;" @click="closeCode"/>
        <span>微信支付</span>
    </template>
    <img :src="codeUrl" height="150px" width="150px"/>
    <div style="margin-bottom: 10px;">请使用本人微信扫码支付</div>
  </van-dialog>

</template>
<script setup>
import StatusBar from '../../components/statusBar.vue'
import {useRouter} from 'vue-router'
import { ref,reactive,getCurrentInstance, onMounted, computed} from 'vue';
import dayjs from 'dayjs'
import Qrcode from 'qrcode'

dayjs().format()
//获取当前实例
const {proxy}=getCurrentInstance()
const router=useRouter()
//回退方法
const goback=()=>{
  router.go(-1)
}
//订单详情初始数据
const orderDetailData=reactive({
  companion:[],
  hospitals:[],
  service:{}
})
onMounted(async()=>{
  const {data}=await proxy.$api.h5companion()
  Object.assign(orderDetailData,data)
})

//创建订单-提交表单数据
const form=ref({})

//医院选项数据
const showHospital=ref(false)
const hospitalColumns=computed(()=>{
  return orderDetailData.hospitals.map(element=>{
    return {'text':element.name,'value':element.id}
  })
})
const onConfirmHospital=({selectedOptions})=>{
  // console.log(selectedOptions,'selectedOptions')
  form.value.hospital_name=selectedOptions[0].text
  form.value.hospital_id=selectedOptions[0].value
  // console.log(form.value)
  showHospital.value=false
}
//时间选择
const showTime=ref(false)
const minDate=ref(new Date())
const currentDate=ref([])
const onConfirmTime=({selectedValues})=>{
  const timeStr=selectedValues.join('-')
  form.value.starttime=new Date(timeStr).getTime()
  showTime.value = false
}

//陪护师选择
const showCompanion=ref(false)
const CompanionColumns=computed(()=>{
  return orderDetailData.companion.map((element)=>{
    return {'text':element.name,'value':element.id}
  })
})
const currentCompanion=ref()
const onConfirmCompanion=({selectedOptions})=>{
  form.value.companion_id=selectedOptions[0].value
  currentCompanion.value=selectedOptions[0].text
  showCompanion.value=false
}
const codeUrl=ref()
const showCodeDialog=ref(false)
//提交订单
const submitForm=async()=>{
  const params=[
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime',
  ] 

  for(const i of params){
    if(!form.value[i]){
      console.log(i)
      showNotify({ message: '请检查订单内容！' });
      return
    }
  }
  const {data}=await proxy.$api.createOrder(form.value)
  Qrcode.toDataURL(data.wx_code).then((url)=>{
    showCodeDialog.value=true
    codeUrl.value=url
  })
}
//关闭支付弹窗并跳转
const closeCode=()=>{
  showCodeDialog.value=false
  router.push('/order')
}

</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
    margin-top: 3px;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>